<template>
  <div class="shopContainer">
    <!-- 商城管理头部区域 -->
    <div class="shopHeader">
      <el-button type="primary">全部商品</el-button>
      <el-button type="primary">已上线</el-button>
      <el-button type="primary">未上线</el-button>
    </div>

    <!-- 商城管理多条查询搜索区域 -->
    <div class="searchContainer commonClass">
      <!-- 输入商品编号/商品名称搜索框 -->
      <el-input
        v-model="numName"
        placeholder="商品编号/商品名称"
        clearable
        style="width: 12%; margin-right: 30px"
      />

      <!-- 商品分类选择框 -->
      <el-select
        v-model="goodsClassification"
        clearable
        placeholder="请选择商品分类"
        style="width: 12%; margin-right: 30px"
      >
        <el-option
          v-for="item in goodsClassificationOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <!-- 商品类型选择框 -->
      <el-select
        v-model="goodsType"
        clearable
        placeholder="请选择商品类型"
        style="width: 12%; margin-right: 30px"
      >
        <el-option
          v-for="item in goodsTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <!-- 查询键 -->
      <el-button type="primary">查询</el-button>

      <!-- 添加商品按钮 -->
      <el-button type="info" @click="addGoods">添加商品</el-button>
    </div>

    <!-- 商城管理表格区域 -->
    <div class="shopTableContainer">
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        max-height="780px"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="num" label="编号" min-width="50" sortable />
        <el-table-column label="商品图片" min-width="100" align="center">
          <template #default="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.imgSrc"
            />
          </template>
        </el-table-column>
        <el-table-column property="name" label="商品名称" min-width="130" />
        <el-table-column property="price" label="价格" min-width="100" sortable>
          <template #default="scope">
            <span>价格：￥{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          property="online"
          label="上线"
          min-width="90"
          align="center"
        />
        <el-table-column
          property="tag"
          label="标签"
          min-width="90"
          align="center"
        />
        <el-table-column
          property="sales"
          label="销量"
          min-width="90"
          sortable
          align="center"
        />
        <el-table-column label="操作" min-width="120" align="center">
          <template #default="scope">
            <el-link type="primary" @click="editGoods(scope.row)">编辑</el-link>
            <el-link type="primary" @click="deleteGoods(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 商城管理分页区域 -->
    <Pagination
      :bulkOperationOptions="[
        {
          value: '上架',
          label: '上架',
        },
        {
          value: '下架',
          label: '下架',
        },
        {
          value: '删除',
          label: '删除',
        },
      ]"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import Pagination from "../../components/Shop/Pagination.vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  name: "ShopPage",

  //注册分页组件
  components: {
    Pagination,
  },

  setup() {
    const router = useRouter()
    const store = useStore()

    interface Good {
      num: number
      imgSrc: string
      name: string
      price: number
      online: string
      tag: string
      sales: number
      type: string
    }

    const multipleSelection = ref<Good[]>([])

    const handleSelectionChange = (val: Good[]) => {
      multipleSelection.value = val
      console.log(multipleSelection)
    }

    const tableData = ref<Good[]>([])
    tableData.value = [{
            num: 1,
            imgSrc: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            name: "健身哑铃",
            price: 100,
            online: "已上线",
            tag: "无",
            sales: 1000,
            type: '实物商品'
          },
          {
            num: 2,
            imgSrc: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            name: "健身哑铃",
            price: 200,
            online: "下架",
            tag: "无",
            sales: 1000,
            type: '虚拟物品'
          },
          {
            num: 3,
            imgSrc: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            name: "健身哑铃",
            price: 400,
            online: "已上线",
            tag: "无",
            sales: 1000,
            type: '积分兑换商品'
          },
          {
            num: 4,
            imgSrc: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            name: "健身哑铃",
            price: 700,
            online: "已上线",
            tag: "无",
            sales: 1000,
            type: '虚拟物品'
          },
          {
            num: 5,
            imgSrc: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            name: "健身哑铃",
            price: 8888,
            online: "下架",
            tag: "无",
            sales: 1000,
            type: '积分兑换商品'
          },
          {
            num: 6,
            imgSrc: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            name: "健身哑铃",
            price: 9999,
            online: "已上线",
            tag: "无",
            sales: 1000,
            type: '虚拟物品'
          },
          {
            num: 7,
            imgSrc: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            name: "健身哑铃",
            price: 777778,
            online: "下架·",
            tag: "无",
            sales: 1000,
            type: '实物商品'
          }]

    const numName = ref("")

    const goodsClassification = ref("");
    const goodsClassificationOptions = [
      {
        value: "无",
        label: "无",
      },
    ]

    const goodsType = ref("");
    const goodsTypeOptions = [
      {
        value: "虚拟物品",
        label: "虚拟物品",
      },
      {
        value: "实物商品",
        label: "实物商品",
      },
      {
        value: "积分兑换商品",
        label: "积分兑换商品",
      },
    ]

    const addGoods = () => {
      router.push({ name: "addgoods" })
    }

    const editGoods = (e: any) => {
      let obj = JSON.stringify(e)
      router.push({ path: '/addgoods', query: {info: obj} })
    }

    const deleteGoods = (e: any) => {
      let obj = JSON.parse(JSON.stringify(e))
      let goodId = obj.num
      let index = tableData.value.findIndex(item => item.num === goodId)
      tableData.value.splice(index, 1)
      console.log(tableData)   
    }
    return {
      // 商品分类数据
      goodsClassification,
      // 商品分类下拉选项
      goodsClassificationOptions,
      // 商品类型数据
      goodsType,
      // 商品类型下拉选项
      goodsTypeOptions,
      // 商品编号和商品名称
      numName,
      // 批量选择触发事件
      handleSelectionChange,
      // 表格数据
      tableData,
      addGoods,
      editGoods,
      deleteGoods
    }
  }
})
</script>

<style scoped>
.el-link {
  margin-right: 8px;
}

.shopContainer {
  width: 98%;
  height: 100%;
  padding: 30px 0;
  margin: 10px auto;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.commonClass {
  width: 98%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
}

.shopHeader {
  width: 98%;
  padding: 5px 0;
  margin: 0 auto;
}

.searchContainer {
  padding: 10px 0;
}

.shopTableContainer {
  width: 98%;
  margin: 0 auto;
  outline: 1px solid #eee;
}
</style>